<script setup lang="ts">
import { ref } from 'vue';

// 定义输入框
const inputValue = ref('');

const emit = defineEmits<{
  (e: 'add', content: string): void; 
}>();

// 添加待办
const handleAdd = () => {
  const trimmedContent = inputValue.value.trim();
  if (!trimmedContent) {
    alert('请输入待办事项');
    return;
  }
  emit('add', trimmedContent); 
  inputValue.value = ''; // 清空输入框
};
</script>

<template>
  <div class="todo-input">
    <input
      type="text"
      v-model="inputValue"
      placeholder="请输入待办事项"
      @keyup.enter="handleAdd"
    >
    <button @click="handleAdd">添加</button>
  </div>
</template>

<style scoped>
.todo-input {
  display: flex;
  gap: 10px;
  margin: 0 15px 20px;
}

.todo-input input {
  flex: 1;
  padding: 8px;
  font-size: 16px;
  border-radius: 7px;
  border: 1px solid #ccc;
}

.todo-input button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 7px;
}

.todo-input button:hover {
  background-color: #359469;
}
</style>
